<template>
    <el-card class="box-card">
        <el-form :model="dataList" label-width="120px">
            <el-form-item label="品牌名称">
                <el-input v-model="dataList.name" />
            </el-form-item>
            <el-form-item label="品牌首字母">
                <el-input v-model="dataList.firstLetter" />
            </el-form-item>
            <el-form-item label="品牌LOGO">
                <el-upload v-model:file-list="fileList" class="upload-demo"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :on-preview="handlePreview"
                    :on-remove="handleRemove" list-type="picture">
                    <el-button type="primary">点击上传</el-button>
                    el-img
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传jpg/png文件，且不超过100kb
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="品牌专区大图">
                <el-button type="primary">点击上传</el-button>
            </el-form-item>
            <el-form-item label="品牌故事">
                <el-input v-model="form.logo" type="textarea" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="dataList.sort" />
            </el-form-item>
            <el-form-item label="是否显示">
                <el-radio-group v-model="form.showStatus">
                    <el-radio label="是" />
                    <el-radio label="否" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="品牌制造商">
                <el-radio-group v-model="form.sort">
                    <el-radio label="是" />
                    <el-radio label="否" />
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <template #default="scope">
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>重置</el-button>
                </template>
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { AdminAdd, IAdminDelete, IAdminListItem, createItem } from '../../request/QmsAdminConreiller/index'
import * as api from '../../request/api'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { id } from 'element-plus/es/locale'
import { useRoute } from "vue-router"
let route = useRoute()
const fileList = ref<UploadUserFile[]>([
])

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (file) => {
    console.log(file)
}
// do not use same name with ref

let form = ref({
    bigPic: "",
    brandStory: "",
    factoryStatus: 0,
    firstLetter: "",
    logo: "",
    name: "",
    showStatus: 0,
    sort: 0,
    id: route.query.id
})
const dataList = ref({})
const onSubmit = async () => {
    console.log(1);
    form.value = dataList.value
    await api.admin.createItemEdits(form.value)
}
api.admin.createItemEdit(form.value.id).then(res => {
    console.log(res);
    dataList.value = res

})

</script>

<style scoped>
.box-card {
    width: 790px;
    margin: 100px auto;
}
</style>